<template>
  <div class="App" :style="`height: ${windowHeight}px;`">
    <div class="main">
      <Home v-if="activeIndex===0" @success="next"></Home>
      <Verify v-if="activeIndex===1" @success="next"></Verify>
      <Main v-if="activeIndex===2 && type" :type="type"></Main>
    </div>
    <div
      class="footer"
    >
      <span>
        <a
          href="https://beian.miit.gov.cn"
          target="_blank"
          >桂ICP备2022010908号-3</a
        >
      </span>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Home from './components/Home.vue';
import Verify from './components/Verify.vue';
import Main from './components/Main.vue';

const windowHeight = window.innerHeight;

const activeIndex = ref(2);

const type = ref<'xyq' | 'cyc' | ''>('xyq');

function next(_type?: 'xyq' | 'cyc') {
  activeIndex.value += 1;
  if (_type) {
    type.value = _type;
  }
}

</script>

<style lang="scss" scoped>
.App {
  display: flex;
  flex-direction: column;
  height: 100%;
  .main {
    flex: 1;
  }
  .footer {
    flex-shrink: 0;
    font-size: 14px;
    color: gray;
    padding: 4px 0;
    text-align: center;
  }
}
</style>
